import React from 'react';
import { Button } from 'antd';
import { Icon } from '@ant-design/compatible';

// 根据按钮名称的前两个字来确定按钮的图标
const mappingIcon = {
  新增: 'plus',
  编辑: 'edit',

  确定: 'check',
  确认: 'check',
  提交: 'check',

  取消: 'close',
  关闭: 'close',

  查询: 'search',
  筛查: 'search',
  筛选: 'search',

  重置: 'sync',
  更新: 'sync',

  删除: 'delete',
  移除: 'delete',

  清除: 'clear',
  清空: 'clear',

  批量: 'import',
  导入: 'import',
  导出: 'export',

  保存: 'cloud-upload',
  上传: 'upload',
  下载: 'download',

  打印: 'printer',
};

class page extends React.Component {
  render() {
    const { props } = this;
    const { text, icon, loading, type, disabled, onClick } = props;
    const params = {...props};
    const buttonText = text === undefined ? '新增' : text;
    let iconType = icon || mappingIcon[buttonText.substr(0, 2)];
    if (icon) delete params.icon;
    if (loading) {
      delete params.loading;
      iconType = 'loading';
    }

    return (
      <Button
        {...params}
        type={type || 'primary'}
        onClick={(e) => {
          const disabled = disabled !== undefined ?
            disabled : iconType === 'loading';
          if (onClick && !disabled) onClick(e);
        }}
      >
        <Icon type={iconType} />
        {buttonText ? ' ' + buttonText : null}
      </Button>
    );
  }
}

export default page;
